/**
 * Copyright 2017-2022, Voxel51, Inc.
 */

@keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 20000px;
  }
}
@-moz-keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 20000px;
  }
}
@-webkit-keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 20000px;
  }
}
@-ms-keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 20000px;
  }
}
@-o-keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 20000px;
  }
}
.flashlight {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.flashlightContainer {
  position: relative;
  width: 100%;
  contain: size layout paint;

  background-repeat: repeat-y;
  background-size: 100% auto;
  height: 100%;

  animation: animatedBackground 60s linear infinite;
  -moz-animation: animatedBackground 60s linear infinite;
  -webkit-animation: animatedBackground 60s linear infinite;
  -ms-animation: animatedBackground 60s linear infinite;
  -o-animation: animatedBackground 60s linear infinite;
}

.flashlightContainer:focus {
  border: none;
  outline: none;
}

.flashlightPixels {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1267 587'%3E%3Cdefs%3E%3Cstyle%3E.cls-1,.cls-5,.cls-6,.cls-7%7Bfill:%23a6a7a9;%7D.cls-1,.cls-8%7Bopacity:0.2;%7D.cls-2,.cls-3,.cls-4,.cls-8%7Bfill:%236c757d;%7D.cls-2%7Bopacity:0.24;%7D.cls-10,.cls-11,.cls-2,.cls-3,.cls-4,.cls-8,.cls-9%7Bisolation:isolate;%7D.cls-3%7Bopacity:0.08;%7D.cls-4%7Bopacity:0.34;%7D.cls-5%7Bopacity:0.1;%7D.cls-6%7Bopacity:0.05;%7D.cls-7%7Bopacity:0.25;%7D.cls-9%7Bfill:%23499cef;%7D.cls-10%7Bfill:%23ff6d04;%7D.cls-11%7Bfill:%236d04ff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eheader_dark_fancy3%3C/title%3E%3Crect class='cls-1' x='1226.24' y='0.65' width='40.41' height='40.41'/%3E%3Crect class='cls-2' y='336.43' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='0.36' y='0.65' width='40.41' height='40.41'/%3E%3Crect class='cls-4' x='40.76' y='41.06' width='40.41' height='40.41'/%3E%3Crect class='cls-5' x='156.82' y='479.31' width='40.41' height='40.41'/%3E%3Crect class='cls-1' x='470.42' y='506.18' width='40.41' height='40.41'/%3E%3Crect class='cls-2' x='815.05' y='418.7' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='855.45' y='459.11' width='40.41' height='40.41'/%3E%3Crect class='cls-4' x='1145.55' y='506.18' width='40.41' height='40.41'/%3E%3Crect class='cls-5' x='430.01' y='546.59' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='1226.24' y='81.47' width='40.41' height='40.41'/%3E%3Crect class='cls-6' x='913.33' width='40.41' height='40.41'/%3E%3Crect class='cls-7' x='0.36' y='81.47' width='40.41' height='40.41'/%3E%3Crect class='cls-8' x='608.92' y='41.06' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='121.58' y='0.65' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='1185.96' y='546.59' width='40.41' height='40.41'/%3E%3Crect class='cls-3' x='1185.06' y='41.06' width='40.41' height='40.41'/%3E%3Crect class='cls-2' x='1226.24' y='41.06' width='40.41' height='40.41' transform='translate(2492.88 122.53) rotate(-180)'/%3E%3Crect class='cls-6' x='1226.04' y='506.18' width='40.41' height='40.41'/%3E%3Crect class='cls-9' x='583.78' y='381.78' width='20.2' height='20.2'/%3E%3Crect class='cls-10' x='1138.4' y='40.41' width='20.2' height='20.2'/%3E%3Crect class='cls-11' x='84.69' y='84.99' width='20.2' height='20.2'/%3E%3C/svg%3E");
}

.flashlightSection {
  display: block;
  position: absolute;
  contain: size layout paint;
}

.flashlightSection > div {
  position: absolute;
  contain: size layout paint;
  background-color: var(--fo-palette-background-level1);
  overflow: hidden;
}

.flashlightSection.flashlightSectionHidden > div > div {
  display: none;
}

.scrollbar {
  --scrollbar-color: var(--fo-palette-text-tertiary);
}

@-moz-document url-prefix() {
  .scrollbar {
    scrollbar-color: var(--scrollbar-color) transparent;
    scrollbar-width: thin;
  }
}

.scrollbar::-webkit-scrollbar {
  height: 14px;
  width: 14px;
}

.scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

.scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 14px 14px transparent;
  height: 14px;
  width: 14px;
}

.scrollbar::-webkit-scrollbar-thumb {
  border: solid 3px transparent;
  border-radius: 0;
  box-shadow: inset 0 0 8px 8px var(--scrollbar-color);
}
